<template>
	<div class="adminMain" v-loading="load.load">
		<el-row class="tableBtnTop">
			<el-select v-model="field.id" placeholder="请选择" class="filter">
				<el-option v-for="(item, index) in field.list" :label="item.label" :key="item.key" :value="item.value"></el-option>
			</el-select>
			<div class="search">
				<el-input placeholder="请搜索" v-model="keyword" @keyup.enter.native="page = 1;getList()">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<el-button class="f1" @click="getList">立即搜索</el-button>
			<el-button class="f1" @click="detailFunction('show', -1)" style="margin-left:15px;">添加渠道</el-button>
		</el-row>
		<el-table :data="tableData" border>
			<el-table-column prop="id" label="ID" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="title" label="渠道名称" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="channel_key" label="key" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="tax_ratio" label="税收比率" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="user" label="操作" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="tableBtn">
						<a @click="detailFunction('show', scope.$index)">编辑</a>
						<el-popconfirm title="确定删除吗？" @confirm="deleteItem(scope.$index)">
						    <a slot="reference" style="color:#999;">删除</a>
						</el-popconfirm>
                    </div>
                </template>
            </el-table-column>
		</el-table>
		<div class="paginationBlock">
			<el-pagination layout="prev, pager, next, sizes, total" @size-change="getList" @current-change="getList" :total="total" :current-page.sync="page" :page-size.sync="limit" ></el-pagination>
		</div>
		
		<!-- 详情弹窗 -->
		<el-dialog title="提示" :visible.sync="detail.show" width="550px" :close-on-click-modal="false">
			<el-form label-position="top" v-if="detail.data">
				<el-form-item label="ID" v-if="detail.data.id">{{ detail.data.id }}</el-form-item>
				<el-form-item label="渠道key (不可与其它记录重复)" required>
					<el-input v-model="detail.data.channel_key"></el-input>
				</el-form-item>
				<el-form-item label="渠道名称" required>
					<el-input v-model="detail.data.title"></el-input>
				</el-form-item>
				<el-form-item label="税收比率" required>
					<el-input v-model="detail.data.tax_ratio"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="detail.show = false;">取 消</el-button>
				<el-button type="primary" @click="detailFunction('post')" :loading="detail.load.load">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 是否处于加载中
				load: { load: false },
				
				// 表格数据
				tableData: [],
				
				// 当前页数
				page: this.$route.query.page ? parseInt(this.$route.query.page) : 1,
				
				// 每页条数
				limit: this.$route.query.limit ? parseInt(this.$route.query.limit) : this.app.limit,
				
				// 总数
				total: this.$route.query.total ? parseInt(this.$route.query.total) : 0,
				
				// 可选择的搜索类型列表
				field: {
					list: [],
					id: this.$route.query.field || "",
				},
				
				// 搜索关键词
				keyword: this.$route.query.keyword || "",
				
				// 详情
				detail: {
					show: false,
					load: {load:false},
					data: null
				},
				
			};
		},
		methods: {
			
			// 详情弹窗
			detailFunction(type, index){
				let _this = this;
				if(type == "show"){
					let data = {
						title: index === -1 ? "" : _this.tableData[index].title,
						channel_key: index === -1 ? "" : _this.tableData[index].channel_key,
						tax_ratio: index === -1 ? "" : _this.tableData[index].tax_ratio,
					}
					
					if(index !== -1){
						data.id = _this.tableData[index].id;
					}
					_this.detail.data = data;
					_this.detail.show = true;
				}else if(type == "post"){
					_this.app.ajax({
						url: "/admin/channel/update",
						method: "POST",
						load: _this.detail.load,
						data: _this.detail.data,
						success(res){
							_this.detail.show = false;
							_this.getList();
							_this.$notify({title: "提示",message: res.msg, type: "success"});
						}
					})
				}
			},
			
			// 删除渠道
			deleteItem(index){
				let _this = this;
				_this.app.ajax({
					url: "/admin/channel/del",
					method: "POST",
					load: _this.load,
					data: { id: _this.tableData[index].id },
					success(res){
						_this.getList();
						_this.$notify({title: "提示",message: res.msg, type: "success"});
					}
				})
			},
			
			// 获取列表
			getList(){
				let _this = this;
				_this.app.ajax({
					url: "/admin/channel/index",
					method: "POST",
					data: {
						keyword: _this.keyword,
						field: _this.field.id,
						limit: _this.limit,
						page: _this.page,
					},
					load: _this.load,
					changeUrl: true,
					success(res){
						_this.total = res.data.total;
						_this.tableData = res.data.list;
						_this.field.list = res.data.fields;
						_this.field.id = _this.field.id || res.data.fields[0].value;
					}
				})
			},
			
		},
		mounted(){
			this.getList();
		},
	};
</script>